<template>
  <div>
    <div class="main_div">
      <div class="title">
        <span>操作记录</span>
        <span class="title-tips">
            通过查看登录时间、登录地点和设备可以判断账号是否正常
        </span>
        <span class="title-tips" style="color: #FF0000">
            注（只展示最近10条登录历史记录）
        </span>
      </div>
      <el-divider></el-divider>
      <el-table
        :data="recordData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="登录时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          width="180">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP">
        </el-table-column>
        <el-table-column
          prop="device"
          label="登录设备">
        </el-table-column>
        <el-table-column
          prop="os"
          label="操作系统">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'RecordShow',
  data () {
    return {
      recordData: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getRecordData()
  },
  methods: {
    getRecordData () {
      var _this = this
      this.$axios.post('/api/record/getRecordByUserId',
        this.$qs.stringify({
          userId: _this.user.userId
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.recordData = result.result
          }
        })
    }
  }
}
</script>

<style>
  .main_div {
    margin-top: 20px;
  }
  .title {
    text-align: left;
    padding-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }
  。main_div .el-divider--horizontal{
    margin: 12px 0px;
  }
  .title-tips{
    font-size: 12px;
    color: #93999f;
    margin-left: 18px;
    font-weight: 400;
  }
</style>
